<template>
	<view class="content ">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" v-if="addressList" @click="showsr1=true">
						<image class="dq-icon" src="../../static/img/home/aq-icon.png" mode="aspectFill"></image>
						<view class="diqu">{{address}}</view>
						<u-icon name="arrow-down" color="#ffffff" size="24"></u-icon>
					</view>
					<view class="page_title font_16_FFF">
						<image src="../../static/img/home/logo.png" mode="aspectFill"></image>
					</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image v-show="current%3==1" class="main-bg" src="../../static/img/home/home-bg.png" mode=""></image>
			<image v-show="current%3==2" class="main-bg" src="../../static/img/home/home-bg1.png" mode=""></image>
			<image v-show="current%3==0" class="main-bg" src="../../static/img/home/home-bg2.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="seach-div flex u-p-l-24 u-m-l-32 u-m-t-16" @click="search">
					<image class="s-i" src="../../static/img/home/s-i.png" mode=""></image>
					<view class="u-m-l-24">
						请输入相关词搜索
					</view>
				</view>
				<view class="u-m-t-16">
					<u-swiper height="260" effect3d :list="lblist" @change="changeswiper"></u-swiper>
				</view>
				<view class="gn-div">

					<view class="gn-item1 flex flex_sb">

						<view class="item1-item text_center" @click="topItem(1)">
							<image class="item1-icon" src="../../static/img/home/h-1.png" mode="aspectFill"></image>
							<view class="item-title">AI咨询</view>
							<view class="item-jj">智能识别</view>
						</view>
						<view class="item1-item text_center" @click="topItem(2)">
							<image class="item1-icon" src="../../static/img/home/h-2.png" mode="aspectFill"></image>
							<view class="item-title">在线咨询</view>
							<view class="item-jj">分钟级响应</view>
						</view>
						<view class="item1-item text_center" @click="topItem(3)">
							<image class="item1-icon" src="../../static/img/home/h-3.png" mode="aspectFill"></image>
							<view class="item-title">预约咨询</view>
							<view class="item-jj">严选律师</view>
						</view>
						<view class="item1-item text_center" @click="topItem(4)">
							<image class="item1-icon" src="../../static/img/home/h-4.png" mode="aspectFill"></image>
							<view class="item-title">找律师</view>
							<view class="item-jj">覆盖全省</view>
						</view>
					</view>
					<view class="gn-item2 flex flex_sb flex_wrap">
						<view class="item2-item text_center" @click="toDetail(1)">
							<image class="item2-icon" src="../../static/img/home/h-5.png" mode="aspectFill"></image>
							<view class="item2-title">电话咨询</view>
						</view>
						<view class="item2-item text_center" @click="toDetail(2)">
							<image class="item2-icon" src="../../static/img/home/h-6.png" mode="aspectFill"></image>
							<view class="item2-title">图文咨询</view>
						</view>
						<view class="item2-item text_center" @click="toDetail(3)">
							<image class="item2-icon" src="../../static/img/home/h-7.png" mode="aspectFill"></image>
							<view class="item2-title">法律顾问</view>
						</view>
						<view class="item2-item text_center" @click="toDetail(4)">
							<image class="item2-icon" src="../../static/img/home/h-8.png" mode="aspectFill"></image>
							<view class="item2-title">法律课程</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(0)">
							<image class="item2-icon" src="../../static/img/home/h-9.png" mode="aspectFill"></image>
							<view class="item2-title">律师函</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(1)">
							<image class="item2-icon" src="../../static/img/home/h-10.png" mode="aspectFill"></image>
							<view class="item2-title">文书代写</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(2)">
							<image class="item2-icon" src="../../static/img/home/h-11.png" mode="aspectFill"></image>
							<view class="item2-title">合同审查</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(3)">
							<image class="item2-icon" src="../../static/img/home/h-12.png" mode="aspectFill"></image>
							<view class="item2-title">诉讼指导</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(4)">
							<image class="item2-icon" src="../../static/img/home/h-13.png" mode="aspectFill"></image>
							<view class="item2-title">线上调解</view>
						</view>
						<view class="item2-item text_center" @click="toDetail2(5)">
							<image class="item2-icon" src="../../static/img/home/h-14.png" mode="aspectFill"></image>
							<view class="item2-title">法律意见书</view>
						</view>
					</view>
				</view>
				<view class="laba-div flex flex_sb" v-if="xioaxiList">
					<view class="flex">
						<image class="laba-icon" src="../../static/img/home/h-15.png" mode="aspectFill"></image>
						<view class="laba-text line_1">
							{{xioaxiList.time_trans}}，用户{{xioaxiList.user_name}}咨询了律师{{xioaxiList.lawyer_name}}
						</view>
					</view>
					<view class="laba-btn" @click="toDetail2(0)">
						立即咨询
					</view>
				</view>
				<view class="ai-div">
					<image @click="addMess" class="ai-bg" src="../../static/img/home/ai-bg.png" mode="aspectFill">
					</image>
				</view>
				<view class="youhui-div">
					<view class="yh-top flex">
						<image class="yh-top-icon" src="../../static/img/home/h-16.png" mode="aspectFill"></image>
						<view class="yh-top-title">
							优惠福利
						</view>
						<view class="yh-top-jj">
							活动专享 限时优惠
						</view>
					</view>
					<view class="yh-top2" @click="toyouhui(1)">
						<image class="yh-top2-img" src="../../static/img/home/h-17.png" mode="aspectFill"></image>
						<view class="yh-top2-title">
							积分兑换好礼
						</view>
						<view class="yh-top2-jj">
							参与赢取更多好礼，超多福利等你来！
						</view>
					</view>
					<view class="flex flex_sb u-m-t-20">
						<view class="yh3-1" @click="toyouhui(2)">
							<image class="yh3-1-img" src="../../static/img/home/h-18.png" mode="aspectFill"></image>
							<view class="yh3-1-title">
								优惠券
							</view>
							<view class="yh3-1-jj">
								大额优惠券放送
							</view>
							<view class="yh3-1-btn">
								立即领取
							</view>
						</view>
						<view class="">
							<view class="yh3-2" @click="toyouhui(3)">
								<image class="yh3-2-img" src="../../static/img/home/h-19.png" mode="aspectFill"></image>
								<view class="yh3-2-title">
									限时秒杀
								</view>
								<view class="yh3-2-jj">
									超值惊喜来袭
								</view>
								<view class="yh3-2-btn">
									立即领取
								</view>
							</view>
							<view class="yh3-3 u-m-t-20" @click="toyouhui(4)">
								<image class="yh3-3-img" src="../../static/img/home/h-20.png" mode="aspectFill"></image>
								<view class="yh3-3-title">
									签到有礼
								</view>
								<view class="yh3-3-jj">
									签到领积分
								</view>
								<view class="yh3-3-btn">
									立即领取
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="youhui-div u-m-t-20">
					<view class="yh-top flex flex_sb">
						<view class="flex">
							<image class="yh-top-icon" src="../../static/img/home/h-21.png" mode="aspectFill"></image>
							<view class="yh-top-title">
								法海广场
							</view>
							<view class="yh-top-jj">
								海量资讯 专业律师普法
							</view>
						</view>
						<view class="yh-top-jj" @click="fahai">
							更多
						</view>
					</view>
					<scroll-view scroll-x="true" style="height: 480rpx;" v-if="fhlist.length>0">
						<view class="fh-div u-m-t-20 flex ">
							<view class="fh-item u-m-r-20" v-for="(item,index) in fhlist" :key="index"
								@click="tofahai(item)">
								<!-- <image class="fh-img" src="../../static/img/home/ai-bg.png" mode="aspectFill"></image> -->
								<view class="pro-img">
									<image v-if="item.images && item.images.length>0" class="pro-item-img"
										:src="item.images[0]" mode="aspectFill">
									</image>
									<image v-if="item.video" class="pro-item-bf"
										src="../../static/img/home/bofang-icon.png" mode="">
									</image>
								</view>
								<view class="font_weight font_14_333 u-m-t-12 line_1" style="width: 100%;">
									{{item.title}}
								</view>
								<view class="flex u-m-t-12">
									<image class="fh-head" :src="item.lawyer_avatar" mode=""></image>
									<view class="font_12_999 u-m-l-8">
										{{item.lawyer_name}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="jpls-div">
					<view class="jpls-top">
						<image class="jpls-ng" src="../../static/img/home/h22.png" mode=""></image>
						<view class="jpls-text">
							金牌律师
						</view>
					</view>
					<view class="jpls-main flex flex_wrap flex_sb">
						<view class="jpls-item" v-for="(item,index) in lvshilist" :key="index" @click="tolvshi(item)">
							<view class="jpls-zt-top">
								<image class="ls-main-img" :src="item.avatar" mode="aspectFill"></image>
								<view class="jpls-zt" v-if="item.is_online==1">
									在线
								</view>
							</view>
							<view class="flex u-m-t-20">
								<view class="font_14_333 font_weight">
									{{item.name}}
								</view>
								<image class="u-m-l-8 jp-i" src="../../static/img/home/h23.png" mode=""></image>
								<view class="u-m-l-8 font_10_333">
									{{item.province}}
								</view>
							</view>
							<view class="flex u-m-t-8">
								<view v-if="index2<3" class="u-m-r-4 line_1" :class="index2<3?'bq'+(index2+1):'bq1'"
									v-for="(item2,index2) in item.task_arr" :key="index2">
									{{item2.name}}
								</view>
							</view>
							<view class="flex u-m-t-12">
								<view class="flex">
									<image class="ls-xing" src="../../static/img/home/h24.png" mode=""></image>
									<view class="u-m-l-4 ls-fs">
										{{item.mark}}
									</view>
								</view>
								<view class="flex ls-zy">
									<view class="font_10_666">
										执业：
									</view>
									<view class="ls-fs">
										{{item.license_date}}
									</view>
								</view>
							</view>
							<view class="flex u-m-t-16 flex_sb">
								<view class="ls-btn1" @click.stop="zixun(1,item)">
									立即咨询
								</view>
								<view class="ls-btn2" @click.stop="zixun(2,item)">
									预约咨询
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32" :mask-close-able="false">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					全部服务
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;">
					<fuwuList v-if="id" :sid="id"></fuwuList>
				</scroll-view>
			</view>
		</u-popup>

		<gongzhonghaotanchuangVue></gongzhonghaotanchuangVue>
		<!-- <u-picker :params="params" mode="region" confirm-color="#651321" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id"
			label-name="name"></u-select>
		<mypicker mode="selector" v-model="showsr2" :range="selector1" @confirm="typeconfirm"></mypicker>
		<mypickertime mode="multiSelector" v-model="showsr3" :range="multiSelector" @confirm="typeconfirm2">
		</mypickertime>
		<u-tabbar active-color="#FA3B21" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	import gongzhonghaotanchuangVue from '../../components/gongzhonghaotanchuang/gongzhonghaotanchuang.vue';
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	import mypicker from '../../components/my-picker/my-picker.vue';
	import mypickertime from '../../components/my-picker-time/my-picker-time.vue';
	export default {
		components: {
			gongzhonghaotanchuangVue,
			fuwuList,
			mypicker,
			mypickertime
		},
		data() {
			return {
				params: {
					province: true,
					city: true,
					area: true
				},
				current: 1,
				province: '',
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#CF000D'],
					slideBackgroundColor: [1, '#CF000D']
				},
				tabbar: '',

				showsr1: false,
				address: '请选择',

				showsr2: false,
				showsr3: false,

				lblist: [],

				bottomShow: true,

				zixunShow: false,
				selector1: ['律师函', '文书代写', '合同审查', '诉讼指导', '线上调解', '法律意见书', '服务类型'],
				multiSelector: [
					['13日', '14日', '15日'],
					['10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00']
				],

				fhlist: [],
				lvshilist: [],
				id: '',
				xioaxiList: null,

				addressList: null
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(e) {
			this.tabbar = [{
				iconPath: "/static/img/tabBar/1-2.png",
				selectedIconPath: "/static/img/tabBar/1-1.png",
				text: '首页',
				pagePath: "/pages/index/index"
			}, {
				iconPath: "/static/img/tabBar/2-2.png",
				selectedIconPath: "/static/img/tabBar/2-1.png",
				text: '找律师',
				pagePath: "/pages/lawyer/lawyer"
			}, {
				iconPath: "/static/img/tabBar/3-1.png",
				selectedIconPath: "/static/img/tabBar/3-1.png",
				text: 'AI模型',
				midButton: true,
				pagePath: "/pages/AI/AI"
			}, {
				iconPath: "/static/img/tabBar/4-1.png",
				selectedIconPath: "/static/img/tabBar/4-2.png",
				text: '在线咨询',
				// count: 2,
				isDot: false,
				pagePath: "/TXIM/pages/consultation/consultation"
			}, {
				iconPath: "/static/img/tabBar/5-2.png",
				selectedIconPath: "/static/img/tabBar/5-1.png",
				text: '我的',
				pagePath: "/pages/mine/mine"
			}]

			uni.setStorage({
				key: 'userType',
				data: 1
			});
			this.getaddrerss()

			if (e.user_id) {
				uni.setStorage({
					key: 'shangji_id',
					data: e.user_id
				});
			}else if (e.scene) {
				let invite_id = ''; //邀请人id
				let scene = decodeURIComponent(query.scene);
				let paramsArr = scene.split('&');
				let paramsObj = {}
				paramsArr.forEach(keyValStr => {
					let keyVal = keyValStr.split('=');
					let key = keyVal[0]
					let val = keyVal[1]
					paramsObj[key] = val;
				});
				
				if (paramsObj['invite_id']) {
					invite_id = paramsObj['invite_id'];
					uni.setStorage({
						key: 'shangji_id',
						data: invite_id
					});
				}
			}


		},
		onShow() {

			this.lunbo()
			this.getfhlist()

			this.xiaoxi()

			if (uni.getStorageSync("localAddress")) {
				let localAddress = JSON.parse(uni.getStorageSync("localAddress"))
				this.address = localAddress.address
				this.province = localAddress.province
			}

			this.getlvshi()
		},

		methods: {
			
			bindload(e) {
				console.log('bindload:', e)
			},
			binderror(e) {
				console.log('binderror:', e)
			},
			addMess() {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						title: "请先登录",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						if (res.data.ai_assistant == 1) {
							uni.navigateTo({
								url: "/subPackageA/pages/AI/AIcaht"
							})
						} else {
							uni.showModal({
								title: '提示',
								content: 'AI助手已过期，请购买',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/mine/AIpay"
										})
									}
								}
							});
							// uni.showToast({
							// 	title: "AI助手已过期，请购买",
							// 	icon: "none"
							// });


							// uni.navigateTo({
							// 	url: "/pages/mine/AIpay"
							// })
						}
					}
				})


			},
			changeswiper(e) {
				this.current = e + 1
			},
			getaddrerss() {
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			xiaoxi() {
				this.$api({
					url: '/index_msg',
					method: 'get',
					data: {
						limit: 1,
					},
				}).then(res => {
					if (res.code == 1) {
						this.xioaxiList = res.data[0]
					}
				})
			},
			lunbo() {
				this.$api({
					url: '/getBanner',
					method: 'get',
					data: {
						position: 1,

					},
				}).then(res => {
					if (res.code == 1) {
						this.lblist = res.data
					}
				})
			},
			getlvshi() {
				this.$api({
					url: '/user/look_lawyers',
					method: 'get',
					data: {
						limit: 100,
						// king: 1,
						province: this.province
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvshilist = res.data.data
					}
				})
			},
			getfhlist() {
				this.$api({
					url: '/lawyer/getSeaList',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: -1,
					},
				}).then(res => {
					if (res.code == 1) {
						this.fhlist = res.data.list
					}
				})
			},

			zixun(e, item) {
				this.id = ''
				setTimeout(() => {
					this.id = item.id
					if (e == 1) {
						this.zixunShow = true
					}
					if (e == 2) {
						// this.showsr2 = true

						uni.navigateTo({
							url: "/pages/lawyer/lawyerListDetail?id=" + item.id
						})
					}
				}, 50)


			},
			search() {
				uni.navigateTo({
					url: "/pages/index/search"
				})
			},
			regionconfirm1(e) {
				console.log(e)
				this.address = e[0].label
				this.province = e[0].value
				this.getlvshi()
				let localAddress = {
					address: this.address,
					province: this.province
				}
				uni.setStorage({
					key: 'localAddress',
					data: JSON.stringify(localAddress)
				});
			},
			typeconfirm(e) {
				this.showsr2 = false
				this.showsr3 = true
				console.log(this.selector1[e])
			},
			typeconfirm2(e) {
				this.showsr3 = true
				console.log(this.multiSelector[0][e[0]])
				console.log(this.multiSelector[1][e[1]])
				uni.navigateTo({
					url: "/pages/index/paySuccess"
				})
			},
			toDetail(e) {

				if (!uni.getStorageSync("token")) {
					uni.showToast({
						title: "请先登录",
						icon: "none"
					});
					return
				}


				if (e == 1) {
					uni.navigateTo({
						url: "/pages/index/consultPhone"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/index/consultTuwen"
					})
				}

			},
			topItem(e) {
				if (e == 1) {
					uni.navigateTo({
						url: "/pages/AI/AI"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/TXIM/pages/consultation/chat"
					})
				} else if (e == 3) {
					uni.navigateTo({
						url: "/pages/lawyer/lawyer"
					})
				} else if (e == 4) {
					uni.navigateTo({
						url: "/pages/lawyer/lawyer"
					})
				}

			},
			toDetail2(e) {
				uni.navigateTo({
					url: "/pages/lawyer/lawyerTypes?type=" + e
				})
			},
			fahai() {
				uni.navigateTo({
					url: "/pages/index/fahaiCenter"
				})
			},
			tofahai(e) {
				uni.navigateTo({
					url: "/pages/index/fahaiDetail?id=" + e.id
				})
			},
			tolvshi(e) {
				uni.navigateTo({
					url: "/pages/lawyer/lawyerDetail?id=" + e.id
				})
			},
			toyouhui(e) {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						title: "请先登录",
						icon: "none"
					});
					return
				}
				if (e == 1) {
					uni.navigateTo({
						url: "/pages/mine/jifenShop?type=1"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/mine/youhuiquanCenter?type=1"
					})
				} else if (e == 3) {
					// uni.navigateTo({
					// 	url: "/pages/mine/youhuiquanCenter"
					// })
				} else if (e == 4) {
					uni.navigateTo({
						url: "/pages/mine/singin?type=1"
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}

	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;

			image {
				width: 190rpx;
				height: 56rpx;
				margin: 0 auto;
			}
		}
	}

	.zhanwei {
		width: 100%;
		// background-color: #000;
	}

	.main-div {
		position: relative;
		width: 100%;
		min-height: 1000rpx;

		.main-bg {
			width: 100%;
			height: 1000rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.m-d {
			position: relative;
			padding-top: 88rpx;
			z-index: 2;

			.seach-div {
				width: 686rpx;
				height: 72rpx;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				border: 1rpx solid #EE9A8F;
				font-size: 24rpx;
				color: #EAD8BF;

				.s-i {
					width: 32rpx;
					height: 32rpx;
				}
			}

			/deep/ swiper {
				background-color: rgba(0, 0, 0, 0) !important;
			}

			/deep/ .u-swiper-wrap {
				overflow: inherit;
			}

			/deep/ .u-swiper-indicator {
				bottom: -30rpx !important;
			}

			/deep/ .u-indicator-item-round-active {
				width: 14rpx;
			}
		}
	}

	.gn-div {
		width: 686rpx;
		// height: 562rpx;
		padding: 42rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #F8ECEC;
		margin: 16rpx auto;
		margin-top: 48rpx;

		.gn-item1 {
			padding: 0 42rpx;

			.item1-item {

				.item1-icon {
					width: 96rpx;
					height: 96rpx;
					margin: 0 auto;
				}

				.item-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-top: 16rpx;
				}

				.item-jj {
					font-size: 24rpx;
					color: #999999;
					margin-top: 4rpx;
				}
			}
		}

		.gn-item2 {
			padding: 0 22rpx;

			.item2-item {
				margin-top: 40rpx;
				width: 20%;

				.item2-icon {
					width: 56rpx;
					height: 56rpx;
					margin: 0 auto;
				}

				.item2-title {
					font-size: 24rpx;
					color: #333333;
					margin-top: 12rpx;
				}
			}
		}
	}

	.laba-div {
		padding: 0 24rpx;
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #F8ECEC;
		margin: 0 auto;

		.laba-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.laba-text {
			font-size: 24rpx;
			color: #333333;
			margin-left: 12rpx;
			width: 436rpx;
		}

		.laba-btn {
			width: 132rpx;
			height: 56rpx;
			background: linear-gradient(180deg, #FF3636 0%, #EB0202 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFF3EA;
			text-align: center;
			line-height: 56rpx;
		}
	}

	.ai-div {
		width: 686rpx;
		height: 320rpx;
		margin: 20rpx auto;

		.ai-bg {
			width: 686rpx;
			height: 320rpx;
		}

	}

	.youhui-div {
		width: 686rpx;
		padding: 24rpx 28rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.yh-top {

			.yh-top-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.yh-top-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 12rpx;
			}

			.yh-top-jj {
				font-size: 24rpx;
				color: #AAAAAA;
				margin-left: 16rpx;
			}
		}

		.yh-top2 {
			width: 630rpx;
			height: 124rpx;
			background: linear-gradient(90deg, #D4F3E9 0%, #E6F9DB 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			padding: 24rpx 34rpx;
			margin-top: 24rpx;

			.yh-top2-img {
				position: absolute;
				right: 0;
				top: 0;
				height: 124rpx;
				width: 290rpx;
			}

			.yh-top2-title {
				font-weight: 600;
				font-size: 30rpx;
				color: #4D4D4D;
			}

			.yh-top2-jj {
				font-size: 20rpx;
				color: #4D4D4D;
				margin-top: 4rpx;
			}
		}

		.yh3-1 {
			width: 334rpx;
			height: 352rpx;
			padding: 30rpx 34rpx;
			background: linear-gradient(180deg, #FFF2CC 0%, #FFFBF0 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-1-img {
				position: absolute;
				right: 0;
				bottom: 24rpx;
				height: 170rpx;
				width: 192rpx;
			}

			.yh3-1-title {
				font-weight: 500;
				font-size: 36rpx;
				color: #BF5B11;
			}

			.yh3-1-jj {
				font-size: 24rpx;
				color: #BF5B12;
				margin-top: 6rpx;
			}

			.yh3-1-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #DFA774;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}

		.yh3-2 {
			padding: 20rpx 28rpx;
			width: 276rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #FFEFEF 0%, #FEF7F7 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-2-img {
				position: absolute;
				right: 0;
				bottom: 8rpx;
				height: 94rpx;
				width: 112rpx;
			}

			.yh3-2-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #F93A1F;
			}

			.yh3-2-jj {
				font-size: 24rpx;
				color: #F93A1F;
				margin-top: 6rpx;
			}

			.yh3-2-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #FF1414;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}

		.yh3-3 {
			padding: 30rpx 34rpx;
			width: 276rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #EAF3FF 0%, #F6F9FF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-3-img {
				position: absolute;
				right: 0;
				bottom: 8rpx;
				height: 80rpx;
				width: 92rpx;
			}

			.yh3-3-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #1D78E5;
			}

			.yh3-3-jj {
				font-size: 24rpx;
				color: #2680EB;
				margin-top: 6rpx;
			}

			.yh3-3-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #1D78E5;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}
	}

	.fh-div {

		.fh-item {
			width: 272rpx;


			.pro-img {
				position: relative;
				width: 272rpx;
				height: 360rpx;
				border-radius: 8rpx;

				.pro-item-img {
					position: absolute;
					top: 0;
					left: 0;
					width: 272rpx;
					height: 360rpx;
					border-radius: 8rpx;
					background: #eee;
				}

				.pro-item-bf {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.fh-img {
				width: 272rpx;
				height: 360rpx;
			}

			.fh-head {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}

	.jpls-div {
		margin-top: 30rpx;

		.jpls-top {
			margin: 0 auto;
			position: relative;
			width: 686rpx;
			height: 56rpx;

			.jpls-ng {
				width: 686rpx;
				height: 14rpx;
				position: absolute;
				left: 0;
				top: 20rpx;
			}

			.jpls-text {
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
			}
		}

		.jpls-main {
			padding: 32rpx;

			.jpls-item {
				width: 334rpx;
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;

				.jpls-zt-top {
					position: relative;
					width: 294rpx;
					height: 412rpx;

					.ls-main-img {
						width: 294rpx;
						height: 412rpx;
					}

					.jpls-zt {
						position: absolute;
						top: 0;
						left: 0;
						width: 78rpx;
						height: 40rpx;
						background: #FFFFFF;
						border-radius: 8rpx 0rpx 20rpx 0rpx;
						background-color: rgba(255, 255, 255, 0.2);
						font-size: 24rpx;
						color: #38E552;
						line-height: 40rpx;
						text-align: center;
					}
				}

				.jp-i {
					width: 24rpx;
					height: 20rpx;
				}

				.bq1 {
					font-size: 20rpx;
					color: #FF4A50;
					padding: 4rpx 6rpx;
					background: #F8EDED;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.bq2 {
					font-size: 20rpx;
					color: #5385E3;
					padding: 4rpx 6rpx;
					background: #E5F3FF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.bq3 {
					font-size: 20rpx;
					color: #F7790D;
					padding: 4rpx 6rpx;
					background: #FFE8D3;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.ls-xing {
					width: 24rpx;
					height: 24rpx;
				}

				.ls-fs {
					font-size: 20rpx;
					color: #FD8643;
				}

				.ls-zy {
					padding-left: 20rpx;
					border-left: 1px #999 solid;
					margin-left: 20rpx;
				}

				.ls-btn1 {
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					text-align: center;
					line-height: 56rpx;
				}

				.ls-btn2 {
					width: 144rpx;
					height: 56rpx;
					background: #FFEBEB;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #FF9D9D;
					font-weight: bold;
					font-size: 24rpx;
					color: #F81B19;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}
	}
</style>